<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title>课程详情</title>
    <div data-th-replace="layout/user/user-center-head"></div>
</head>
<body>
<div class="u-bg">
    <div data-th-replace="layout/user/user-head"></div>
    <div class="container pr u-container" id="uCenterMain">
        <section class="uCenter-box pa" id="uCenter-box">
            <div class="row uH">
                <div class="col-sm-12 uH">
                    <div class="u-i-left__wrap u-i-left_box uH">
                        <!--左侧公共菜单 开始-->
                        <div data-th-replace="layout/user/user-left-menu"></div>
                        <!--左侧公共菜单 结束-->
                        <article class="u-c-c-cont__wrap u-c-c-main uH">
                            <div class="u-c-box uH" style="min-height: 100%;">
                                <div class="mr20 pr10 pt10 uH">
                                    <section class="c-head-title clearfix">
                                        <aside class="pull-right mt10">
                                            <a href="javascript:void(0)" id="calendarBtn1" class="c-fff fs14 pr" title="去签到">
                                                <i class="fa fa-calendar-check-o mr5"></i>签到
                                            </a>
                                        </aside>
                                        <h6>
                                            <a th:href="@{/web/uc/course/user/index}" class="fs14 c-333 vam hLh30">我的课程</a>
                                            <i class="fa fa-angle-right fs14 c-333 ml5 mr5 vam"></i>
                                            <span class="vam fs14" th:text="${courseBuyRecord['course']['courseName']}"></span>
                                        </h6>
                                    </section>

                                    <div class="row">
                                        <article class="col-sm-9">
                                            <section class="u-head-title fs16">
                                                <aside class="pr hand" id="course-info">
                                                    <input type="hidden" id="courseTypeKey" th:value="${courseBuyRecord['courseTypeKey']}"/>
                                                    <input type="hidden" id="_courseId" th:value="${courseBuyRecord['courseId']}"/>
                                                    <!--非套餐课程-->
                                                    <span th:if="${courseBuyRecord['courseTypeKey']}!='PACKAGE'" th:text="${courseBuyRecord['course']['courseName']}"></span>
                                                    <!--未激活-->
                                                    <select th:if="${courseBuyRecord['courseTypeKey']}=='PACKAGE' and ${courseBuyRecord['status']}==0" class="form-control" style="width: 200px;font-size: 12px" id="package-course">
                                                        <option th:if="${!#lists.isEmpty(courseBuyRecord['course']['packageCourseList'])}" th:each="packageCourse:${courseBuyRecord['course']['packageCourseList']}" th:value="${packageCourse['courseId']}" th:text="${packageCourse['course']['courseName']}"></option>
                                                    </select>
                                                    <!--已激活-->
                                                    <select th:if="${courseBuyRecord['courseTypeKey']}=='PACKAGE' and ${courseBuyRecord['status']}==1" class="form-control" style="width: 200px;font-size: 12px" id="package-course">
                                                        <option th:if="${!#lists.isEmpty(courseBuyRecord['courseBuyPackageCourseList'])}" th:each="courseBuyPackageCourse : ${courseBuyRecord['courseBuyPackageCourseList']}" th:value="${courseBuyPackageCourse['courseId']}" th:text="${courseBuyPackageCourse['course']['courseName']}"></option>
                                                    </select>
                                                </aside>
                                            </section>
                                        </article>
                                        <article class="col-sm-3">
                                            <article class="u-head-title fs16"><span>学习统计</span></article>
                                        </article>
                                    </div>

                                    <div class="mt20 right-box" id="u-menuList">
                                        <section class="right-s-box u-my-course_box pb10">
                                            <article class="row">
                                                <div class="col-sm-9 uH">
                                                    <!--<div th:if="${course}!=null and ${courseCatalog}!=null}" class="btn btn-close btn-rounded btn-block">
                                                        <button aria-hidden="true" data-dismiss="alert" class="close" type="button" title="关闭" style="margin-top: -2px;">×</button>
                                                        <span class="pl10 ml5">
                                                            上次你学习到:&nbsp;
                                                        <span th:if="${course['courseName']}!=null and ${packageCourseName}!=null and ${courseCatalog}!=null" data-toggle="tooltip" data-placement="top" th:attr="data-original-title=${course['courseName']}+'-'+${packageCourseName}+'-'+${courseCatalog['catalogName']}" class="u-name vam">
                                                            <span th:text="${course['courseName']}+'-'+${packageCourseName}+'-'+${courseCatalog['catalogName']}"></span>
                                                            </span>
                                                        <span th:if="${course['courseName']}!=null and ${packageCourseName}==null and ${courseCatalog}==null" data-toggle="tooltip" data-placement="top" th:attr="data-original-title=${course['courseName']}" class="u-name vam">
                                                            <span th:text="${course['courseName']}"></span>
                                                        </span>
                                                        <span th:if="${course['courseName']}!=null and ${packageCourseName}!=null and ${courseCatalog}==null" data-toggle="tooltip" data-placement="top" th:attr="data-original-title=${course['courseName']}+'-'+${courseCatalog['packageCourseName']}" class="u-name vam">
                                                            <span th:if="${courseCatalog}!=null" th:text="${course['courseName']}+'-'+${courseCatalog['packageCourseName']}"></span>
                                                        </span>
                                                        <span th:if="${course['courseName']}!=null and ${packageCourseName}==null and ${courseCatalog}!=null" data-toggle="tooltip" data-placement="top" th:attr="data-original-title=${course['courseName']}+'-'+${courseCatalog['catalogName']}" class="u-name vam">
                                                            <span th:if="${courseCatalog}!=null" th:text="${course['courseName']}+'-'+${courseCatalog['catalogName']}"></span>
                                                        </span>
                                                            &nbsp;&nbsp;
                                                            <input id="orderNo" type="hidden" th:value="${orderNo}"/>
                                                            <a th:href="@{/web/uc/course/play/toPlayCourse?orderNo={orderNo}&courseId={courseId}&catalogId={catalogId}(orderNo=${orderNo},courseId=${course['id']},catalogId=${courseCatalog['id']})}"
                                                               class="c-fff" id="study">继续学习</a>
                                                        </span>
                                                    </div>-->
                                                    <article class="mt10">
                                                        <input type="hidden" id="courseId" th:value="${courseBuyRecord['courseId']}"/>
                                                        <input type="hidden" id="recordId" th:value="${courseBuyRecord['id']}"/>
                                                        <!--课程目录-->
                                                        <div id="courseDirectory"></div>
                                                    </article>
                                                </div>

                                                <div class="col-sm-3 uH">
                                                    <!--学习统计-->
                                                    <section>
                                                        <article class="statistical_list">
                                                            <div class="pl10 mr20 pt10 mb20 pb10">
                                                                <aside class="media-left vam">
                                                                    <em class="u-i-baseTj-ico u-i-s-ico u-i-baseTj-ico-1"></em>
                                                                </aside>
                                                                <section class="media-body ml20 pl10" data-toggle="tooltip" data-placement="top" data-original-title="累计观看:0分钟">
                                                                    <div class="hLh20 txtOf mb5">
                                                                        <span class="fs18 c-333" id="studySumTime">0分钟</span>
                                                                    </div>
                                                                    <span class="fs12 c-666 show hLh20">累计观看</span>
                                                                </section>
                                                                <div class="media-right vam pr10">
                                                                    <i class="fa fa-arrow-up fs12 c-danger"></i>
                                                                </div>
                                                            </div>
                                                            <div class="pl10 mr20 pt10 mb20 pb10">
                                                                <aside class="media-left vam">
                                                                    <em class="u-i-baseTj-ico u-i-s-ico u-i-baseTj-ico-2"></em>
                                                                </aside>
                                                                <section class="media-body ml20 pl10" data-toggle="tooltip" data-placement="top" data-original-title="本周学习:0分钟">
                                                                    <div class="hLh20 txtOf mb5">
                                                                        <span class="fs18 c-333" id="weekStudTime">0分钟</span>
                                                                    </div>
                                                                    <span class="fs12 c-666 show hLh20">本周学习</span>
                                                                </section>
                                                                <div class="media-right vam pr10">
                                                                    <i class="fa fa-minus fs12"></i>
                                                                </div>
                                                            </div>
                                                            <div class="pl10 mr20 pt10 mb20 pb10">
                                                                <aside class="media-left vam">
                                                                    <em class="u-i-baseTj-ico u-i-s-ico u-i-baseTj-ico-3"></em>
                                                                </aside>
                                                                <section class="media-body ml20 pl10" data-toggle="tooltip" data-placement="top" data-original-title="课程学习排名">
                                                                    <div class="hLh20 txtOf mb5" id="studyCourseRank">
                                                                        <span>暂无排名</span>
                                                                        <!--<span class="fs18 c-333">
                                                                            <span>1</span>·
                                                                            <span  class="fs14">2</span>
                                                                        </span>-->
                                                                    </div>
                                                                    <span class="fs12 c-666 show hLh20">课程学习排名</span>
                                                                </section>
                                                               <!-- <div class="media-right vam pr10">
                                                                    <i class="fa fa-arrow-down fs12 c-primary"></i>
                                                                    <i class="fa fa-minus fs12"></i>
                                                                    <i class="fa fa-arrow-up fs12 c-danger"></i>
                                                                </div>-->
                                                            </div>
                                                            <div class="pl10 mr20 pt10 mb20 pb10">
                                                                <aside class="media-left vam pr">
                                                                    <em class="u-i-baseTj-ico u-i-s-ico u-i-baseTj-ico-4"></em>
                                                                    <span class="pa uSort text-center fs12 c-fff">1</span>
                                                                </aside>
                                                                <section class="media-body ml20 pl10" data-toggle="tooltip" data-placement="top" data-original-title="课程学习排行">
                                                                    <div class="hLh20 txtOf mb5">
                                                                        <span class="fs16 c-333" id="rankOneUserName">暂无学习记录</span>
                                                                    </div>
                                                                    <span class="fs12 c-666 show hLh20">课程学习排行</span>
                                                                </section>
                                                                <div class="media-right vam" style="padding: 0;">
                                                                    <span class="portrait show">
                                                                        <img id="rankOneUserImg" th:src="@{{path}/front/web/v3/img/default/userface.gif(path=${staticPath})}"/>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </article>
                                                    </section>

                                                    <!--课程相关班级-->
                                                    <section class="mt5 pt10">
                                                        <article class="u-head-title fs16"><span>课程相关班级</span></article>
                                                        <section class="pl10 ml5 mt10" id="course-classes-list-box">
                                                            <section class="no-data__wrap">
                                                                <span class="no-data-ico"></span>
                                                                <p class="mt20"><span class="c-666">还没有课程相关班级~~</span></p>
                                                            </section>

                                                            <div th:if="${!#lists.isEmpty(classesMap)}" th:each="classes:${classesMap}" class="pt10 mb20 pb10 mt5">
                                                                <aside class="media-left vam">
                                                                    <span class="portrait show">
                                                                        <img th:src="${classes['imageMap']['pcUrlMap']['medium']}">
                                                                    </span>
                                                                </aside>
                                                                <section class="media-body ml20">
                                                                    <div class="hLh20 txtOf mb5">
                                                                        <span class="fs16 c-333" th:text="${classes['className']}"></span>
                                                                    </div>
                                                                    <span class="fs12 c-666 show hLh20"><span th:text="${classes['topicNum']}"></span>话题·<span th:text="${classes['userNum']}"></span>同学</span>
                                                                </section>
                                                                <div class="media-right vam">
                                                                    <a th:href="@{/web/class/info?classId={classesId}(classesId=${classes['id']})}" class=" fs18 c-ccc " target="_blank"><i class="fa fa-arrow-circle-o-right"></i></a>
                                                                </div>
                                                            </div>

                                                        </section>
                                                    </section>
                                                </div>
                                            </article>
                                        </section>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
<div data-th-replace="layout/user/user-common"></div>
<!--公共引入签到js-->
<script th:src="@{{path}/front/web/business/common/processing-check-in.js?v={v}(path=${staticPath},v=${v})}"></script>
<script th:src="@{{path}/front/web/business/course/user/user-course-info.js?v={v}(path=${staticPath},v=${v})}"></script>
</body>
</html>